<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title></title>
		<style type="text/css">
			@-webkit-keyframes scrollToUp {
			    0% {
			      background-position: 0 0;
			    }
			   
			    100% {
			      background-position: 0 -569px;  // 向上滚动则就是图片的高度的负值，否则为图片的宽度，也可以百分比
			    }
			  }
			  /*@keyframes scrollToUp {
			    0% {
			      background-position: 0 0;
			    }
			    100% {
			      background-position: 0 -569px;
			    }
			  }*/
		.xiaohong{
			/*margin-top: 100px;*/
			font-size: 50px ;
			/*padding-top: 50px;*/
			color:white;
			font-family:"隶书";
			text-align: center;
		}	
		body{
		    background-image: url(img/bg.png);  什么图片都可以
		   /*background-size: 100% 569px;*/
		   /*background-repeat:repeat-y;*/
		    background-attachment: fixed; /* 让背景图片和文本脱离*/
		    -webkit-animation: scrollToUp 30s linear infinite; /* 引入 scrollToUp动画 */
		    animation: scrollToUp 30s linear infinite;
			/*background-position:50% ;*/
			background-repeat:repeat-y;
		}
		.p1{
			color: white;
			font-size: 20px ;
			text-align: center;
			margin-top: -35px;
		}
		span{
			margin-left: 15px;
		}
		.den{
			 position: relative;
			/* width: 400px;*/
			 height: 250px;
			 margin: 0px auto;
		}
		.icon{
			position: absolute;
			top:170px;
			left:110px;
		}
		.ico{
			position: absolute;
			top: 225px;
			left: 110px;
		}
		#button1{
			margin-top: 170px;
			margin-left: 70px;
			font-size: 20px;
			width: 250px;
			height: 40px;
			border: none;
			background: white;
			border-radius: 8px;
			
		}
		#button2{
			color:white;
			margin-top: 15px;
			margin-left: 70px;
			width: 250px;
			height: 40px;
			border: none;
			font-size: 20px;
			background-color: rgba(250,250,250,0.2);
			border-radius: 8px;
		}
		.n{
			width: 30px;
			height: 30px;
			margin-left: 100px;
			margin-top: 20px;
			opacity: 0.8;
		}
		.name{
			color: white;
			margin-top: -30px;
			margin-left: 140px;
		}
		.nam{
			color: white;
			margin-top: -35px;
			margin-left: 270px;
		}
		.bag{
			color: white;
		}
		.dibu{
			margin-top:10px ;
			margin-left: -18px;
		}
		.den{
			margin-top: 60px;
			margin-left: -17px;
		}
		</style>
	</head>
	<body>
		<div class="bag">
      		<div id="imgB77
      		gc">
       			
       		<div>
			<p class="xiaohong">小红书</p>
			<p class="p1"><span>标</span><span>记</span><span>我</span><span>的</span><span>生</span><span>活</span></p>
		</div>
		<div class="den">
			<svg t="1566635838054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1990" width="40" height="40"><path d="M401.135 660.548c-35.499 0-61.167-6.007-94.481-15.292l-96.666 48.606 27.853-82.466c-68.267-47.514-108.134-107.588-108.134-181.316 0-129.98 122.334-229.376 271.428-229.376 131.618 0 249.583 78.097 272.521 189.508-9.83-1.638-18.022-2.731-25.668-2.731-129.98 0-230.468 97.758-230.468 215.177 0 20.207 2.731 38.229 7.646 57.344-7.646 0.546-16.384 0.546-24.03 0.546z" fill="#0ABB07" p-id="1991"></path><path d="M799.812 754.483l19.115 68.813-72.636-40.96c-27.853 6.007-54.613 14.199-82.466 14.199-128.341 0-229.376-87.927-229.376-196.608 0-109.227 101.035-197.154 229.376-197.154 121.242 0 230.468 87.927 230.468 197.154 0 60.621-40.96 115.234-94.481 154.556z" fill="#0ABB07" p-id="1992"></path><path d="M589.551 511.454c-13.107 0-26.761 12.561-26.761 27.853 0 12.561 13.107 24.576 26.761 24.576 20.207 0 34.406-12.561 34.406-24.576 0-15.292-14.199-27.853-34.406-27.853z m-87.928-128.888c21.299 0 34.406-13.107 34.406-33.314 0-21.299-13.107-33.314-34.406-33.314-20.207 0-39.322 12.561-39.322 33.314 0 20.207 19.115 33.314 39.322 33.314z m-189.508-66.628c-20.207 0-40.96 12.561-40.96 33.314 0 20.207 21.299 33.314 40.96 33.314 19.115 0 34.406-13.107 34.406-33.314 0-21.299-15.292-33.314-34.406-33.314z m427.623 195.516c-14.199 0-26.761 12.561-26.761 27.853 0 12.561 12.561 24.576 26.761 24.576 19.115 0 33.314-12.561 33.314-24.576 0-15.292-14.746-27.853-33.314-27.853z" fill="#FFFFFF" p-id="1993"></path></svg>
		    <svg t="1566636300852" class="ico" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3623" width="40" height="40"><path d="M706.950141 919.360301H314.521167c-23.239887 0-42.024459-18.784572-42.02446-42.024459V148.590781c0-23.239887 18.904986-42.024459 42.02446-42.024459H706.829727c23.239887 0 42.024459 18.784572 42.024459 42.024459v728.745061c0.120414 23.239887-18.784572 42.024459-41.904045 42.024459z m-196.274694-42.024459c15.533396 0 28.056444-12.523048 28.056444-28.056444S526.208843 821.222954 510.675447 821.222954s-28.056444 12.523048-28.056444 28.056444 12.643462 28.056444 28.056444 28.056444z m196.274694-686.720602H314.521167v588.583255H706.829727V190.61524z m0 0" fill="#ffffff" p-id="3624"></path></svg>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
	        <input type="button"  id="button1" value="微信登陆">             
			<input type="button"  id="button2" value="&nbsp;手机号登陆">   
			</div>  
		<div class="dibu">
			<svg t="1566871936639" class="n" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2287" width="200" height="200"><path d="M727.647 502.678c-34.835-6.74-17.878-25.135-17.878-25.135s34.088-55.471-6.812-95.854c-50.556-49.953-173.686 6.295-173.686 6.295-46.936 14.342-34.519-6.597-27.851-42.193 0-42.021-14.544-113.056-139.771-71.179-125.056 42.321-232.406 190.227-232.406 190.227C54.572 563.093 64.43 639.073 64.43 639.073c18.624 167.794 199.267 213.853 339.785 224.775 147.791 11.366 347.346-50.256 407.76-177.063C872.562 559.801 762.625 509.562 727.647 502.678L727.647 502.678 727.647 502.678zM415.109 816.582c-146.727 6.725-265.43-65.79-265.43-162.406 0-96.759 118.703-174.232 265.43-180.957 146.869-6.74 265.747 53.086 265.747 149.543C680.855 719.232 561.978 810.014 415.109 816.582L415.109 816.582 415.109 816.582zM385.877 536.78C238.26 553.824 255.362 690.219 255.362 690.219s-1.523 43.228 39.519 65.2c86.313 46.216 175.355 18.252 220.163-39.031C560.024 659.263 533.668 519.88 385.877 536.78L385.877 536.78 385.877 536.78zM348.629 728.344c-27.564 3.146-49.81-12.56-49.81-35.296 0-22.576 19.688-46.361 47.252-49.19 31.645-3.003 52.223 14.945 52.223 37.824C398.439 704.272 376.049 725.211 348.629 728.344L348.629 728.344 348.629 728.344zM435.687 655.225c-9.37 6.869-20.867 5.979-25.723-2.4-5.145-8.076-3.19-20.938 6.207-27.663 10.894-8.077 22.247-5.692 27.248 2.385C448.277 635.623 444.798 648.039 435.687 655.225L435.687 655.225 435.687 655.225zM799.559 443.6c11.957 0 21.959-8.666 23.798-20.034 0.143-0.905 0.287-1.653 0.287-2.543 18.021-159.877-132.786-132.357-132.786-132.357-13.337 0-24.087 10.62-24.087 24.072 0 13.163 10.75 23.784 24.087 23.784 108.241-23.626 84.5 83.308 84.5 83.308C775.185 432.994 786.107 443.6 799.559 443.6L799.559 443.6 799.559 443.6zM781.997 164.546c-52.081-12.129-105.827-1.653-120.83 1.192-1.208 0.144-2.271 1.193-3.335 1.336-0.459 0.159-0.89 0.605-0.89 0.605-14.86 4.181-25.61 17.647-25.61 33.656 0 18.983 15.608 34.676 35.152 34.676 0 0 18.913-2.543 31.789-7.473 12.703-5.073 120.83-3.736 174.434 85.104 29.23 64.913 12.876 108.27 10.748 115.298 0 0-6.984 16.914-6.984 33.498 0 19.142 15.608 31.258 35.152 31.258 16.181 0 29.833-2.243 33.771-29.304l0.144 0C1003.367 274.914 875.264 185.929 781.997 164.546L781.997 164.546 781.997 164.546zM781.997 164.546" p-id="2288" fill="#ffffff"></path></svg>
			<svg t="1566871862921" class="n" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1483" width="200" height="200"><path d="M76.95508 596.438279c-36.26886 89.047255-42.145048 173.976068-13.045139 189.841778 20.065908 10.95526 51.55717-13.934232 81.004541-59.625433 11.665512 49.799423 40.530374 94.851908 81.750561 131.018573-43.233421 16.642389-71.480005 43.82104-71.480005 74.678696 0 50.673187 76.436443 91.648107 170.777377 91.648107 85.087215 0 155.555493-33.289887 168.559755-77.085378 3.484835-0.035768 16.938753-0.035768 20.316284 0 13.065578 43.744394 83.590064 77.085378 168.621072 77.085378 94.340935 0 170.772268-41.010689 170.772268-91.648107 0-30.7759-28.205707-58.036307-71.485115-74.678696 41.17931-36.222872 70.151476-81.21915 81.760781-131.018573 29.4627 45.691201 60.831329 70.580693 80.953444 59.625433 29.120348-15.86571 23.377012-100.840511-13.009371-189.841778-28.502071-69.941977-67.131625-121.483818-96.70163-132.847856 0.429217-4.440355 0.633606-8.977795 0.633606-13.464137 0-27.025359-7.17917-52.027265-19.488508-72.374208 0.209499-1.573797 0.209499-3.198691 0.209499-4.772487 0-12.447301-2.866558-24.092374-7.700362-34.168761-7.470424-181.896149-120.998393-326.327761-304.688057-326.327761-183.812297 0-297.381144 144.436722-304.780032 326.327761-4.895121 10.137703-7.705472 21.798106-7.705472 34.168761 0 1.573797 0.097085 3.198691 0.153292 4.772487-12.202034 20.346943-19.396533 45.292642-19.396533 72.374208 0 4.486342 0.148182 8.977795 0.526302 13.464137C144.168461 474.954462 105.375395 526.5474 76.95508 596.438279L76.95508 596.438279zM76.95508 596.438279" p-id="1484" fill="#ffffff"></path></svg>
			<p class="name">微博</p>
			<p class="nam">QQ</p>
			
		</div>
      		</div>
    	</div>
    	
    	<script type="text/javascript">
    	$(function(){
    		$("#button2"){
    			
    		}
    	})
    	</script>
</body>
</html>